<template>
  <div class="app-container" ref="containRef">
    <el-card class="search-from" ref="searchRef">
      <slot name="top" />
    </el-card>
    <div class="table-list" ref="tablelist">
      <el-card>
        <div class="toolbar" ref="toolbarRef">
          <slot name="toolbar" />
        </div>
        <div class="list" :style="{ height: listHeight }">
          <slot name="list"> </slot>
        </div>
        <div class="pager" ref="pagerRef">
          <slot name="pager"> </slot>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script setup lang="ts">
let containRef: any = ref<HTMLElement>();
let searchRef: any = ref<HTMLElement>();
let tablelist: any = ref<HTMLElement>();
let toolbarRef = ref<HTMLElement>();
let pagerRef = ref<HTMLElement>();
let listHeight = ref<any>(200);
let observer:MutationObserver;

const pg_resize = () => {
  console.log('resize')
  let totalHeight = containRef.value.offsetHeight;
  let searchHeight = searchRef.value.$el.offsetHeight;
  let toolbarHeight = toolbarRef.value?.offsetHeight;
  let pagerHeight = pagerRef.value?.offsetHeight;

  listHeight.value =
    totalHeight! - searchHeight! - toolbarHeight! - pagerHeight! - 130 + "px";

};

 
// watch(listHeight,(newval)=>{
//    console.log('listHeight',newval)
// })
onMounted(() => {
  pg_resize();
  // searchRef.value.$el.addEventListener('resize',()=>{
  //   console.log('resize')
  // });
  observer=new MutationObserver(()=>{
    pg_resize();
  });
  observer.observe(searchRef.value.$el,{ attributes: true, childList: true, subtree: true });
  window.addEventListener('resize', pg_resize);
});

onUnmounted(()=>{
 observer.disconnect();
 window.removeEventListener('resize', pg_resize);
});
</script>
<style type="scss">
.search-contain {
  width: 100%;
  padding: 0;
}
.pager {
  margin-top: 10px;
}
.toolbar {
  padding-bottom: 10px;
}
</style>
